<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-row :gutter="20">
                    <span>用户昵称:</span>
                    <el-col :span="8">
                        <el-input clearable style="width: 300px" placeholder="用户昵称" v-model="queryform.username"
                            autocomplete="off" />
                    </el-col>
                    <el-col :span="10">
                        <el-button size="small" type="primary" class="button" @click="checkform">查询</el-button>
                    </el-col>
                </el-row>
            </div>
        </template>
        <el-button type="primary" icon="Plus" size="small" @click="adduser">添加 </el-button>
        <el-button type="danger" icon="Delete" size="small">批量删除 </el-button>

        <el-table :data="tabledata" style="width: 100%; margin:10px 0;" border>
            <el-table-column type="selection" width="40" />
            <el-table-column align="center" type="index" label="序号" width="53" />
            <el-table-column align="center" prop="id" label="id" width="80" />
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="username" label="用户昵称" />
            <el-table-column prop="roleName" label="用户角色" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column label="品牌操作">
                <template #="{ row, $index }">
                    <el-button type="warning" size="small" icon="Edit" @click="editFN(row, $index)"></el-button>
                    <el-button type="danger" size="small" icon="Delete" @click="deleteFN(row, $index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 50]"
            layout=" prev, pager, next, jumper,->, sizes, total" :total="total" @size-change="userlistFN()"
            @current-change="userlistFN" />
    </el-card>
    <!-- 添加的弹出框 -->
    <el-dialog v-model="dialogFormVisible" width="30%" center :title="dialogtitle">
        <el-form :model="form" label-width="140px"   label-position="left">
           
                    <el-form-item label="用户名字" >
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户昵称 "  >
                        <el-input v-model="form.username" autocomplete="off" />
                    </el-form-item>
            
                <el-form-item label="手机号">
                    <el-input v-model="form.phone" autocomplete="off" />
                </el-form-item>
                    <el-form-item label="用户角色">
                        <el-input v-model="form.roleName" autocomplete="off" />
                    </el-form-item>
             
                    <el-form-item label="用户密码">
                        <el-input v-model="form.password" autocomplete="off" />
                    </el-form-item>
              
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitdialog">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getuser, save } from "../../api/index";
import { ElMessage } from "element-plus";
const queryform = ref([])
const tabledata = ref([])
const pageNo = ref(1) //当前页面
const pageSize = ref(10)  //分页下拉框
const total = ref(0)   
const dialogFormVisible = ref(false)

// 条件查询
const checkform = () => {
    console.log(queryform.value.username);
    userlistFN(queryform.value.username)
}
const userlistFN = (page) => {
    pageNo.value=page?page:1
    getuser(pageNo.value,pageSize.value).then(res => {
        console.log(res)
        tabledata.value = res.data.records
        total.value = res.data.total
    })
}
onMounted(() => {
    userlistFN()
});
// dialog 内容
const form = ref([])
const dialogtitle = ref('添加用户')
// 添加用户
const adduser = () => {
    // "name": "string",
    //     "password": "string",
    //         "phone": "string",
    //             "roleName": "string",
    //                 "username": "string"
    dialogtitle.value = '添加用户'
    form.value = []
    dialogFormVisible.value = true
}
const submitdialog = () => {
    console.log(form.value);
    let data = {...form.value}
    save(data).then(res=>{
        console.log(res);
        if (res.code==200) {
            ElMessage({
                type:"success",
                message:"添加成功"
            })
            
        } else {
            ElMessage({
                type:"warning",
                message:res.message
            })
            
        }
    })
}
// 编辑
const editFN = (row, index) => {
    dialogFormVisible.value = !dialogFormVisible.value
    dialogtitle.value = '修改用户'
    console.log(row, index);
    form.value = { ...row }

}
// 删除
const deleteFN = (row) => {
    console.log(row);
}
</script>
<style scoped>
.box-card {
    margin: 20px;
}
</style>